<template>
  <div class="container">
    <TopBtn :title="'消息通知'"></TopBtn>

    <!-- 推送通知 -->
    <div class="prompt flex-sp-center">
      <div class="flex-center">
        <text>X</text>
        开启推送通知，重要消息不错过
      </div>
      <div class="btn flex-center-center">去开启</div>
    </div>

    <!-- 消息列表 -->
    <view class="info">
      <view class="row flex-sp-center" v-if="noticeList.title" @click="goInfo()">
        <image src="@/static/my/xtcz.png" mode=""></image>
        <view class="">
          <view class="title flex-sp-center">
            {{ noticeList.title }}
            <uni-dateformat :date="noticeList.createTime" format="hh:mm"></uni-dateformat>
          </view>
          <view class="text flex-sp-center">
            <view class="textInfo">
              {{ noticeList.content }}
            </view>
            <view class="dian" v-if="noticeList.readStatus == 0"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 聊天会话列表 -->
    <div
      class="tui-conversation"
      @click="handleClickConv"
      @touchstart="handleTouchStart"
      @touchend="handleTouchEnd"
    >
      <ConversationList
        ref="conversationListDomRef"
        class="tui-conversation-list"
        @handleSwitchConversation="handleSwitchConversation"
        @getPassingRef="getPassingRef"
        groupType="问诊"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine'
import { TUIGlobal } from '@tencentcloud/universal-api'
import { ref } from '@/TUIKit/adapter-vue'
import ConversationList from '@/TUIKit/components/TUIConversation/conversation-list/index.vue'
import { onShow, onHide } from '@dcloudio/uni-app'
import { notifyMessagePage } from '@/api/user'
// #ifdef MP-WEIXIN
// uniapp packaged mini-programs are integrated by default, and the default initialization entry file is imported here
// TUIChatKit init needs to be encapsulated because uni vue2 will report an error when compiling H5 directly through conditional compilation
import './entry.ts'
// #endif

const emits = defineEmits(['handleSwitchConversation'])

const totalUnreadCount = ref(0)
const headerRef = ref<typeof ConversationHeader>()
const conversationListDomRef = ref<typeof ConversationList>()
const touchX = ref<number>(0)
const touchY = ref<number>(0)
const isShowConversationHeader = ref<boolean>(true)

TUIStore.watch(StoreName.CONV, {
  totalUnreadCount: (count: number) => {
    totalUnreadCount.value = count
  },
})

TUIStore.watch(StoreName.CUSTOM, {
  isShowConversationHeader: (showStatus: boolean) => {
    isShowConversationHeader.value = showStatus !== false
  },
})

const handleSwitchConversation = (conversationID: string) => {
  TUIGlobal?.navigateTo({
    url: '/TUIKit/components/TUIChat/index',
  })
  emits('handleSwitchConversation', conversationID)
}

const closeChildren = () => {
  headerRef?.value?.closeChildren()
  conversationListDomRef?.value?.closeChildren()
}

const handleClickConv = () => {
  closeChildren()
}

onHide(closeChildren)

const handleTouchStart = (e: any) => {
  touchX.value = e.changedTouches[0].clientX
  touchY.value = e.changedTouches[0].clientY
}

const handleTouchEnd = (e: any) => {
  const x = e.changedTouches[0].clientX
  const y = e.changedTouches[0].clientY
  let turn = ''
  if (x - touchX.value > 50 && Math.abs(y - touchY.value) < 50) {
    // Swipe right
    turn = 'right'
  } else if (x - touchX.value < -50 && Math.abs(y - touchY.value) < 50) {
    // Swipe left
    turn = 'left'
  }
  if (y - touchY.value > 50 && Math.abs(x - touchX.value) < 50) {
    // Swipe down
    turn = 'down'
  } else if (y - touchY.value < -50 && Math.abs(x - touchX.value) < 50) {
    // Swipe up
    turn = 'up'
  }
  // Operate according to the direction
  if (turn === 'down' || turn === 'up') {
    closeChildren()
  }
}

const getPassingRef = ref => {
  ref.value = conversationListDomRef.value
}

const noticeList = ref({})
const request = ref({
  pageNo: 1,
  pageSize: 1,
})

const goInfo = e => {
  uni.navigateTo({
    url: `/pages/my/newsList/newsList?id=${e}`,
  })
}

const getNotifyMessagePage = () => {
  notifyMessagePage(request.value).then(res => {
    if (res.data.list[0] && res.data.list[0].title) {
      noticeList.value = res.data.list[0]
    }
  })
}

onShow(() => {
  getNotifyMessagePage()
})
</script>

<style lang="less" scoped>
.container {
  .prompt {
    width: 750rpx;
    height: 90rpx;
    background: rgba(235, 240, 254, 0.59);
    padding: 0 30rpx 0 50rpx;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 24rpx;
    color: #3e6efe;

    text {
      margin-right: 13rpx;
    }

    .btn {
      width: 136rpx;
      height: 65rpx;
      background: #3e6efe;
      border-radius: 33rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #ffffff;
    }
  }

  .info {
    padding: 30rpx;

    .row {
      height: 180rpx;
      border-bottom: 1px solid #eeeeee;

      image {
        width: 94rpx;
        height: 94rpx;
        margin-right: 18rpx;
      }

      & > view {
        flex: 1;

        .title {
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;

          text {
            font-weight: 500;
            font-size: 28rpx;
            color: #999999;
          }
        }

        .text {
          font-weight: 500;
          font-size: 28rpx;
          color: #999999;
          margin-top: 15rpx;

          .dian {
            width: 18rpx;
            height: 18rpx;
            background: #ff4d3d;
            border-radius: 9rpx;
          }

          .textInfo {
            width: 450rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>
